<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
	</head>
	<body>
		<div id="app" class="box">
			<img src="img/arrawLeft.png" class="son1" @click="btnPre" />
			<div class="flex">
				<img :src="imgList[curIndex]" />
				<img :src="imgList[curIndex+1]" />
				<img :src="imgList[curIndex+2]" />
			</div>
			<img src="img/arrawRight.png" class="son2" @click="btnNext" />
		</div>

		<script>
			var app = new Vue({
				el: '#app',
				data: {
					curIndex: 0,
					imgList: [
						"img/1.png",
						"img/2.png",
						"img/3.png",
						"img/4.png",
						"img/5.png",
						"img/6.png",
						"img/7.png",
						"img/8.png",
						"img/9.png",
						"img/10.png",
						"img/11.png",
						"img/12.png",
						"img/13.png",
						"img/14.png",
						"img/15.png",
						"img/16.png",
						"img/17.png",
						"img/18.png",
						"img/19.png",
						"img/20.png",
						"img/21.png",
						"img/22.png",
						"img/23.png",
						"img/24.png",
						"img/25.png",
					]
				},
				mounted() {
					this.curIndex = 0;
					setInterval(() => {
						this.btnNext();
					}, 1500)
				},
				methods: {
					btnPre() {
						// console.log(this.curIndex);
						if (this.curIndex > 0) {
							this.curIndex--;
						} else {
							this.curIndex = this.imgList.length;
						}
					},
					btnNext() {
						// console.log(this.curIndex);
						if (this.curIndex < this.imgList.length - 3) {
							this.curIndex++;
						} else {
							this.curIndex = 0;
						}
					},

				}
			})
		</script>
	</body>
	<style>
		.box {
			width: 620px;
			height: 200px;
			margin: 30px auto;
			position: relative;
			background-color: #ffffff;
			padding: 10px;
			border: 1px solid black;
		}

		.son1 {
			top: 80px;
			left: 40px;
			width: 50px;
			position: absolute;
		}

		.son2 {
			top: 80px;
			right: 40px;
			width: 50px;
			position: absolute;
		}

		.flex {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.flex img {
			padding: 0px 5px;
			width: 200px;
			height: 200px;
		}
	</style>

</html>
